<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    
    .demo1{
        width: 600px;
        position: relative;
        border: 2px solid #ccc;
    }

    .demo1 .left{
        float: left;
        width: 100px;
    }

    .demo1 .left img{
        width: 60px;
        height: 60px;p
        margin-left:20px;
    }

    .demo1 .right{
        background-color:paleturquoise;
        float: right;
        width: 458px;
        padding: 20px;
        border: 1px solid #ccc;
    }

    .demo1 .right p{
        font-size: 12px;line-height: 25px;
    }

    .demo1 .right span{
        position: absolute;
        right: 20px;
        font-size: 10px;
        top: 10px;
    }

       
    .demo2{
        width: 600px;
        position: relative;
        border: 2px solid #ccc;
    }

    .demo2 img{
        float: left;
        width: 60px;
        height: 60px;
    }

    .demo2 .right{
        background-color:paleturquoise;
        float: right;
        width: 458px;
        padding: 20px;
        border: 1px solid #ccc;
    }

    .demo2 .right p{
        font-size: 12px;line-height: 25px;
    }

    .demo2 span{
        position: absolute;
        right: 20px;
        font-size: 10px;
        top: 10px;
    }

    /*.demo3{*/
        /*width: 458px;*/
        /*position: relative;*/
        /*background-color:paleturquoise;*/
        /*margin-left: 100px;*/
        /*border: 2px solid #ccc;*/
        /*padding: 20px;*/
    /*}*/

    /*.demo3 img{*/
        /*float: left;*/
        /*width: 60px;*/
        /*height: 60px;*/
        /*margin: -20px 0 0 -100px;*/
    /*}*/

    /*.demo3 p{*/
        /*font-size: 12px;line-height: 25px;*/
    /*}*/

    /*.demo3 span{*/
        /*position: absolute;*/
        /*right: 20px;*/
        /*font-size: 10px;*/
        /*top: 10px;*/
    /*}*/
</style>
<body>
    <div class="demo1">
        <div class="left">
            <img src="../img/avatar.JPG" alt="" class="avatar">
        </div>

        <div class="right">
            <span class="time">10分钟之前</span>
            <h6>樱桃小丸子</h6>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
    </div>

    <br/>
    <br/>
    <br/>

    <div class="demo2">
        <img src="../img/avatar.JPG" alt="">

        <div class="right">
            <span>10分钟之前</span>
            <h6>樱桃小丸子</h6>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
    </div>

    {{--<br/>--}}
    {{--<br/>--}}
    {{--<br>--}}

    {{--<div class="demo3">--}}
        {{--<img src="../img/avatar.JPG" alt="">--}}
        {{--<span>10分钟之前</span>--}}
        {{--<h6>樱桃小丸子</h6>--}}
        {{--<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容--}}
            {{--内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容--}}
            {{--内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>     --}}
    {{--</div>--}}
</body>
</html>